<template>
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <div
      style="background-color: #f5f6f7; min-height: 100vh;position: relative;"
    >
      <div class="top_bg"></div>
      <!-- <div class="pop">
      <div class="spinner">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
      </div>
    </div> -->
      <div class="fuel_remit_wraper">
        <div class="fuel_remit_nav">
          <!-- <div class="icon_fixed"></div> -->
          <div class="name"></div>
          <div class="icon_right"></div>
        </div>
        <div class="remit_container">
          <div class="oilGun_container">
            <div class="fuel_remit_top">
              <!-- 金额 -->
              <div class="amount_of_money">
                <div class="amount_of_money_title">金额</div>
                <van-field
                  @click="onFocusField()"
                  @focus="onFocusField()"
                  ref="fieldRef"
                  label="¥"
                  class="field_price placeStyle"
                  placeholder="加油金额(0.01-50000)"
                >
                  <template #button>
                    <div class="discountAmt">
                      立减￥
                    </div>
                  </template>
                </van-field>
              </div>
              <!-- 推荐价格 -->
              <div class="divider_line input">
                <div class="price_list">
                  <div
                    class="price_value"
                    @click="priceChange(item)"
                    v-for="(item, index) in priceList"
                    :key="index"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
              <!-- 油枪信息 -->
              <div class="oilGun_info" @click="goOilGunSelect()">
                <div
                  class="oilGun_info_top"
                  style="margin-bottom: 10px;padding-bottom: 10px; border-bottom: 1px solid #e5e5e5;"
                >
                  <div class="oilGun_title">加油员</div>
                  <div class="oilGun_placeholder">{{ userText }}</div>
                </div>
                <div class="oilGun_info_top">
                  <div class="oilGun_title">油枪</div>
                  <div class="oilGun_placeholder">{{ oilGunText }}</div>
                </div>
                <div class="price">
                  单价：<span class="price_color">￥/L</span>
                </div>
              </div>
              <!-- <div class="divider_line active"></div> -->
            </div>
            <!-- 选择油枪号 -->
            <div class="oilGun_main_wraper">
              <!-- <div class="oilGun_main_title">请选择油枪号</div> -->
              <div class="oilGun_main_content">
                <div
                  class="main_card"
                  :class="[oilGunNum === item.gunName ? 'active' : '']"
                  v-for="item in staOilGunList"
                  :key="item.oilId"
                  @click="changeCard(item)"
                >
                  <div class="gunName">{{ item.gunName }}</div>
                  <div class="oilName">
                    {{ item.oil.oilName + item.oil.oilClass }}
                  </div>
                </div>
              </div>
            </div>
            <!-- 支付方式 -->
            <div class="remit_page_container">
              <div class="remit_page_wraper">
                <div class="stored_radio">
                  <div class="stored_card">
                    <div class="icon stored"></div>
                    <div class="stored_title">储值卡</div>
                  </div>
                  <!-- <input
                  type="radio"
                  name="radios"
                  value="1"
                  @click="changeStoredVale()"
                  v-model="radioParams"
                /> -->
                  <van-radio-group v-model="radioParams">
                    <van-radio
                      name="1"
                      value="1"
                      @click="changeStoredVale('1')"
                      v-model="radioParams"
                      checked-color="#FD6B00"
                    ></van-radio>
                  </van-radio-group>
                </div>
                <div class="stored_amt">卡余额0</div>
                <div class="divider_line active"></div>
                <div class="stored_radio">
                  <div class="stored_card">
                    <div class="icon vx"></div>
                    <div class="stored_title">微信支付</div>
                  </div>
                  <!-- <input
                  type="radio"
                  name="radios"
                  value="2"
                  @click="radioParams = '2'"
                  v-model="radioParams"
                /> -->
                  <van-radio-group v-model="radioParams">
                    <van-radio
                      name="2"
                      value="2"
                      @click="changeStoredVale('2')"
                      v-model="radioParams"
                      checked-color="#FD6B00"
                    ></van-radio>
                  </van-radio-group>
                </div>
              </div>
            </div>
            <!-- 优惠劵列表 -->
            <div class="coupon_info">
              <img src="../static/fuel/pay-yhq.png" />
              <van-coupon-cell :coupons="[]" />
            </div>
          </div>
        </div>
      </div>
      <!-- 底部支付 -->
      <div class="bottom_fix_bar">
        <div class="car_container">
          <!-- <div class="icon_car" @click="showBottom = !showBottom">
                <van-icon name="cart-o" size=".6rem" />
              </div> -->
          <div class="newPrice">
            <div class="price_bar" style="color: red;font-size: 0.28rem;">
              总计：
              <!-- <span class="price_value">￥{{ newPrice }}</span> -->
              <span class="price_value">￥元</span>
              <span
                style="color: #ccc;font-size: 0.2rem;text-decoration: line-through;"
              ></span>
            </div>
            <!-- <div class="price_coupon" v-show="!!couponPrice || CouponData.discountAmt > 0">优惠
            <span class="coupon_value">
              ￥{{ NewCouponPrice }}
            </span>
          </div> -->
            <div
              class="price_coupon"
              style="color: #999;font-size: 0.2rem;    margin-top: .02rem;"
            >
              服务费
              <span>
                ￥
              </span>
            </div>
          </div>
        </div>
        <van-button round type="warning" style="margin-right: .5rem;"
          >立即支付</van-button
        >
      </div>
      <!-- 选择员工油枪弹窗 -->
      <van-popup
        v-model="oilGunOrUserShow"
        round
        position="bottom"
        :style="{ height: '40%' }"
      >
        <div
          style="height: 100%;display: flex;justify-content: center;align-items: center;"
        >
          <div style="height: 100%;" v-show="swipeIndex === 0">
            <div class="oil-title">
              <span>选择员工</span>
            </div>
            <div class="oil-box">
              <div
                style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);font-size: 24px;color: #ccc;"
              >
                该油站下暂无员工
              </div>
            </div>
          </div>
          <div
            style="height: 100%;position: relative;"
            v-show="swipeIndex === 1"
          >
            <van-icon
              @click="clickBack"
              name="revoke"
              size="20"
              style="position: absolute;"
            />
            <div class="oil-title">
              <span>选择油枪</span>
            </div>
            <div class="oil-box">
              <div
                style="position: absolute;top: 50%;left: 30%;transform: translate(-20%,-50%);font-size: 24px;color: #ccc;"
              >
                该员工未绑定油枪
              </div>
            </div>
          </div>
        </div>
      </van-popup>
    </div>
  </van-pull-refresh>
</template>
<script>
import Vue from "vue";
import { getAuthenSF } from "@/utils/getAuthenSF";
import querystring from "querystring";
import { mapMutations } from "vuex";
// 下拉刷新组件
import {
  NumberKeyboard,
  Field,
  Icon,
  Popup,
  Toast,
  Button,
  CouponCell,
  Radio,
  RadioGroup,
  Col,
  Row,
  Swipe,
  SwipeItem,
  PullRefresh
} from "vant";
Vue.use(NumberKeyboard);
Vue.use(Field);
Vue.use(Icon);
Vue.use(Popup);
Vue.use(Toast);
Vue.use(Button);
Vue.use(CouponCell);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Col);
Vue.use(Row);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(PullRefresh);
export default Vue.extend({
  head() {
    return {
      title: "我的"
    };
  },
  data() {
    return {
      redirect: "",
      tip: "认证中,请稍后...",
      mobilePhone: "",
      priceList: [100, 200, 300, 400],
      staOilGunList: [],
      oilGunList: [],
      userList: [],
      radioParams: "2",
      oilGunText: "请选择油枪号",
      userText: "请选择加油员",
      oilGunOrUserShow: false,
      swipeIndex: 1,
      isLoading: false
    };
  },
  async created() {
    console.log("闪付授权中间页----------------");
    try {
      let type = 0;
      // 0 获取openid 常规流程（新用户，或者老用户清除了缓存之后）
      // 1 用户第一次，网站直接跳转 获取phone 正常流程
      // 2 用户通过会员卡界面激活，有openId无activateTicket 可能没有outerStr 其他同1 特殊流程
      // 3 已经激活的用户，木有了缓存，二次进入 正常流程

      let state = this.$route.query.state; // 0
      let code = this.$route.query.code; // 0

      let outerStr = this.$route.query.outer_str; // 1

      let cardId = this.$route.query.card_id; // 1 2
      let openId = this.$route.query.openid; // 1 2 3
      let activateTicket = this.$route.query.activate_ticket; // 1 2
      let encryptCode = this.$route.query.encrypt_code; // 1 2

      let phone = this.$route.query.phone; // 3
      let unionId = this.$route.query.unionid; // 3
      let originUrl = this.$route.query.originurl; // 3

      let enterpriseId = "";
      let consumerId = ""; // 消费者id , 走闪付阶段需要传当前登陆者的userId

      let extStr = "";
      if (!!state) {
        extStr = state;
        type = 0;
      } else if (!!outerStr) {
        extStr = outerStr;
        type = 1;
      } else if (!!cardId && !activateTicket) {
        type = 2;
      } else if (!!phone) {
        type = 3;
        extStr = originUrl;
      }

      // 用户直接访问
      if (!state && !outerStr && !cardId && !phone) {
        this.tip = "此页不支持直接访问";
        return;
      }

      // 解析url
      const urlInfo = this.parseExtStr(extStr);

      console.log("remitAuthSF---解析路径：", urlInfo);
      console.log("remitAuthSF---state:", state);
      console.log("remitAuthSF---outerStr", outerStr);
      console.log("remitAuthSF---openId", openId);
      console.log("remitAuthSF---activateTicket", activateTicket);
      console.log("remitAuthSF---encryptCode", encryptCode);
      console.log("remitAuthSF---phone", phone);
      console.log("remitAuthSF---unionId", unionId);
      console.log("remitAuthSF---originUrl", originUrl);
      console.log("remitAuthSF---enterpriseId", enterpriseId);
      console.log("remitAuthSF---extStr", extStr);
      console.log("remitAuthSF---type", type);
      console.log("remitAuthSF---consumerId", consumerId);

      if (type == 2) {
        //根据会员卡id拉取油企id 重定位跳转地址
        const enterpriseIdPro = await this.queryEnterpriseIdByCardId(cardId);
        enterpriseId = enterpriseIdPro.enterpriseId;
        this.redirect = "/" + enterpriseId + "/my/";
      } else {
        // 网址里面包含油企id，跳转网址在urlInfo里
        enterpriseId = urlInfo.enterpriseId;
        // 充值界面特殊处理
        if (urlInfo.firstUrl == "/charge/") {
          enterpriseId = urlInfo.searchObj.enterpriseId;
        } else if (urlInfo.firstUrl == "/plus/") {
          enterpriseId = urlInfo.searchObj.enterpriseId;
        }

        this.redirect = urlInfo.fullUrl;
      }
      // 没有油企id，强退
      if (!enterpriseId) {
        this.tip = "请访问站点网站";
        return;
      }

      if (type == 0) {
        // openid 认证 回来 -> 开始手机认证
        const openIdRes = await this.queryOpenIdByEnterpriseId(enterpriseId);
        const openId = openIdRes.openId;
        console.log("闪付授权中间页--存了openId" + openId);
        this.$store.commit("authen/setEnterpriseId", enterpriseId);
        this.$store.commit("authen/setOpenId", openId);

        console.log("再走一遍授权--有openId了", extStr);
        getAuthenSF(extStr, "remit");
        return;
      } else if (type == 1 || type == 2) {
        // type == 1  正常流程
        const phoneRes = await this.getPhoneByAuthenInfo(enterpriseId); // 原来的代码
        phone = phoneRes.phone;
        unionId = phoneRes.unionId;
        consumerId = phoneRes.consumerId;

        this.$store.commit("authen/setEnterpriseId", enterpriseId);
        this.$store.commit("authen/setOpenId", openId);
        this.$store.commit("authen/setPhone", phone);
        this.$store.commit("authen/setUnionId", unionId);
        this.$store.commit("authen/setConsumerId", consumerId);

        this.handleGotoPage();
      } else if (type == 3) {
        console.log("103---remitAuth.vue 的type", type);
        this.$store.commit("authen/setEnterpriseId", enterpriseId);
        this.$store.commit("authen/setOpenId", openId);
        this.$store.commit("authen/setPhone", phone);
        this.$store.commit("authen/setUnionId", unionId);

        this.handleGotoPage();
      }
    } catch (err) {
      console.log(err);
      const message = !!err.message ? err.message : err;
      alert(message);
    }
  },
  methods: {
    onRefresh() {
      console.log("下拉刷新");
      // 1、（openid没有）用户未授权 20001
      // 2、（手机号码没有）用户未开电子卡 20002，用户走闪付阶段，跳过领会员卡阶段，是拿不到手机号的。
      // 3、（油企id 没有）油企信息没有配置 30001
      if (!this.openId) {
        Toast("20001");
        this.isLoading = false;
        return;
      }
      if (!this.enterpriseId) {
        Toast("30001");
        this.isLoading = false;
        return;
      }
      this.getUserInfo();
      this.isLoading = false;
    },
    changeUserId(item) {
      console.log(item);
      this.userText = item.name;
      this.swipeIndex = 1;
      this.$axios
        .$get("/staff/list", {
          params: {
            stationId: 233
            // userId: 430
          }
        })
        .then(res => {
          console.log(res);
        });
    },
    clickBack() {
      console.log("-------");
      this.swipeIndex = 0;
    },
    test() {
      window.location.href =
        "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxab62cad69f646815&redirect_uri=https%3A%2F%2Fyh.xailife.com%2Fcash-register%2Fpages%2Fcash%2Findex%3Ffmno%3D301015200001138%26clientSerialNo%3D111111%26platform%3D2&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
    },
    parseExtStr(extStr) {
      let searchObj;
      let searchStr;
      let enterpriseId;

      const [url, str] = extStr.split(".");
      if (str !== undefined) {
        searchStr = str.replace(/-/g, "&").replace(/_/g, "=");
        searchObj = querystring.parse(searchStr);
      } else {
        searchStr = "";
        searchObj = {};
      }

      let enterpriseIdArr = url.replace(/\//, "").match(/^\d{1,}/);
      if (enterpriseIdArr == null) {
        enterpriseId = "";
      } else {
        enterpriseId = enterpriseIdArr[0];
      }

      return {
        fullUrl: url + (searchStr != "" ? "?" : "") + searchStr,
        firstUrl: url,
        searchObj,
        enterpriseId
      };
    },
    async getUserInfo() {
      console.log("手机号getUserInfo" + this.phone);
      try {
        const infoData = await this.$axios.$get("/getOrCreateUserInfo", {
          params: {
            enterpriseId: enterpriseId,
            openId: $nuxt.$store.getters["authen/openId"],
            nickName: ""
          }
        });

        if (infoData.retCode !== 0) {
          throw new Error(infoData.message);
        }
        this.setUserInfo(infoData.data);
        this.$store.commit("authen/setConsumerId", infoData.data.consumerId); // 保存消费者id
        console.log(infoData.data);
      } catch (error) {
        alert(error);
      }
    },
    async handleGotoPage() {
      await this.getUserInfo();
      console.log("1005--页面跳转---remitAuth", this.redirect);
      this.$router.replace({
        path: this.redirect
      });
    },
    // 获取openId
    async queryOpenIdByEnterpriseId(enterpriseId) {
      const code = this.$route.query.code;
      const gzhAuthenRes = await this.$axios.$get("/getGzhAuthorizeInfo", {
        params: {
          code,
          enterpriseId: enterpriseId
        }
      });
      if (gzhAuthenRes.retCode !== 0) {
        return Promise.reject("拉取openId失败");
      }
      const openId = gzhAuthenRes.data.openid;
      console.log("拉取的openId为", openId);
      return Promise.resolve({
        enterpriseId,
        openId
      });
    },
    async getPhoneByAuthenInfo(enterpriseId) {
      // 获取分享者id
      let shareUserId = Number(localStorage.getItem("shareUserId"));
      const encryptCode = this.$route.query.encrypt_code;
      const openId = this.$route.query.openid;
      const activateTicket = this.$route.query.activate_ticket;

      if (
        !!enterpriseId &&
        !!encryptCode &&
        !!openId &&
        !!activateTicket &&
        false
      ) {
        const gzhAuthenRes = await this.$axios.$post("/selectCardMobilePhone", {
          enterpriseId: enterpriseId,
          openId: openId,
          activateTicket: activateTicket,
          encryptCode: encryptCode
        });
        if (gzhAuthenRes.retCode !== 0) {
          return Promise.reject("拉取手机号失败");
        }
        const phone = gzhAuthenRes.data.phone;
        const unionId = gzhAuthenRes.data.unionid;
        // commit("setOpenId", openId)
        // commit ("setPhone", phone)
        // commit ("setUnionId", unionId)
        return Promise.resolve({
          phone,
          unionId
        });
      } else if (!!enterpriseId && !!encryptCode && !!openId) {
        // 根据是否存在分享者shareUserId，给后端传对应的分享者id，让后端给shareUserId对应的用户增加拉取新人的次数
        let gzhAuthenRes;
        if (shareUserId) {
          gzhAuthenRes = await this.$axios.$post("/selectWxMemberCardInfo", {
            enterpriseId: enterpriseId,
            openId: openId,
            encryptCode: encryptCode,
            userId: shareUserId
          });
        } else {
          gzhAuthenRes = await this.$axios.$post("/selectWxMemberCardInfo", {
            enterpriseId: enterpriseId,
            openId: openId,
            // activateTicket: activateTicket,
            encryptCode: encryptCode
          });
        }

        if (gzhAuthenRes.retCode !== 0) {
          return Promise.reject(gzhAuthenRes.message);
        }
        const phone = gzhAuthenRes.data.mobilePhone;
        const unionId = gzhAuthenRes.data.unionid;
        const consumerId = gzhAuthenRes.data.consumerId;
        // ------------------临时测试使用的保存数据，最后记得这个保存可以去掉
        localStorage.setItem(
          "selectWxMemberCardInfo555555",
          JSON.stringify(gzhAuthenRes)
        );
        return Promise.resolve({
          phone,
          unionId,
          consumerId
        });
      } else {
        throw new Error("authen参数不全");
      }
    },
    // 根据cardId拿enterpriseId
    async queryEnterpriseIdByCardId(cardId) {
      const enterpriseIdPro = await this.$axios.$get(
        "/selectEnterpriseIdByCardId",
        {
          params: {
            cardId
          }
        }
      );
      if (enterpriseIdPro.retCode != 0) {
        return Promise.reject("拉取EnterpriseId失败");
      }
      return Promise.resolve({
        cardId: cardId,
        enterpriseId: enterpriseIdPro.data
      });
    },

    // 根据enterpriseId 拿appId
    async queryAppIdByEnterpriseId(enterpriseId) {
      const appIdRes = await this.$axios.$get("/getStationGzhAppId", {
        params: {
          enterpriseId
        }
      });
      if (appIdRes.retCode != 0) {
        return Promise.reject("获取appid失败");
      }
      // commit("setAppId", appIdRes.data.appId)
      return Promise.resolve({
        enterpriseId,
        appId: appIdRes.data.appId
      });
    },
    ...mapMutations({
      setEnterpriseId: "authen/setEnterpriseId",
      setAppId: "authen/setAppId",
      setTempEnterpriseId: "setTempEnterpriseId",
      setUserInfo: "authen/setUserInfo"
    })
    // ...mapActions({
    //   getAppId: "authen/getAppId",
    // }),
  }
});
</script>
<style lang="scss" scoped>
.top_bg {
  width: 100vw;
  height: 4rem;
  background: url("../static/fuel/pay-bg.png") no-repeat;
  background-size: 100% 100%;
}

::v-deep .field_price > div:nth-child(1) {
  width: 1em;
  height: auto;
}

.pop {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ccc;
  opacity: 0.3;
  z-index: 999;

  .spinner {
    margin: 40vh auto 0;
    width: 70px;
    text-align: center;
  }

  .spinner > div {
    width: 18px;
    height: 18px;
    background-color: black;

    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  }

  .spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
  }

  .spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
  }

  @-webkit-keyframes sk-bouncedelay {
    0%,
    80%,
    100% {
      -webkit-transform: scale(0);
    }

    40% {
      -webkit-transform: scale(1);
    }
  }

  @keyframes sk-bouncedelay {
    0%,
    80%,
    100% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }

    40% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }
}

.fuel_remit_wraper {
  box-sizing: border-box;
  width: 90vw;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0.3rem;

  &.active {
    background-color: #fff;
  }

  .fuel_remit_nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.32rem 0.24rem;
    background-color: #fff;
    border-bottom: 2px dashed #f5f5f5;
    border-radius: 0.3rem 0.3rem 0rem 0rem;

    .icon_fixed {
      width: 0.32rem;
      height: 0.32rem;
      background: url("../static/fuel/fixed.png") no-repeat 0 0;
      background-size: 100% 100%;
    }

    .name {
      font-size: 0.28rem;
    }

    .icon_right {
      width: 0.32rem;
      height: 0.32rem;
      background: url("../static/fuel/right.png") no-repeat 0 0;
      background-size: 100% 100%;
    }
  }

  .van-number-keyboard {
    &.disabold .van-key--blue {
      background-color: #eaeaea;
    }
  }

  .remit_container {
    .oilGun_container {
      .fuel_remit_top {
        padding: 0.24rem;
        box-sizing: border-box;
        width: 100%;
        background-color: #fff;
        border-radius: 0rem 0rem 0.3rem 0.3rem;

        &.active {
          padding-bottom: 0.2rem;
        }

        .oilGun_info {
          min-height: 0.52rem;
          margin-top: 0.3rem;
          border-top: 1px solid #e5e5e5;
          padding-top: 0.3rem;

          .oilGun_info_top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;

            .oilGun_title {
              font-size: 0.32rem;
              font-weight: 500;
              margin-right: 0.32rem;
            }

            .oilGun_placeholder {
              color: #aeaeae;
              font-size: 0.28rem;
              font-weight: 500;
            }
          }

          .oli_icon_close {
            width: 0.28rem;
            height: 0.28rem;
            background: url("../static/fuel/close.png") no-repeat 0 0;
            background-size: 100% 100%;
            position: absolute;
            right: 0.24rem;
          }

          .oilGun_value {
            .num {
              font-size: 0.4rem;
              font-weight: 600;
              margin-right: 0.16rem;
            }

            .name {
              font-size: 0.28rem;
              color: #34b053;
            }
          }

          .price {
            color: #999;
            font-size: 0.27rem;
            margin-top: 0.3rem;

            .price_color {
              color: #999;
            }
          }
        }

        .divider_line {
          position: relative;
          width: 100%;
          margin: 0.16rem 0;
          background: #fff;

          // &.active {
          //   background-color: #98cda7;
          // }

          &.input {
            margin: 0;
            background: #fff;

            .price_list {
              display: flex;
              margin-top: 0.2rem;
              margin-bottom: 0.3rem;
              background: #fff;

              .price_value {
                width: 1.64rem;
                text-align: center;
                height: 0.7rem;
                line-height: 0.7rem;
                font-size: 0.26rem;
                background-color: #fff;
                border: 1px solid #f6f6f6;
                margin-right: 0.1rem;
                border-radius: 0.16rem;

                &:nth-child(4n) {
                  margin-right: 0;
                }
              }
            }

            &.active {
              background-color: #98cda7;
            }
          }
        }

        .amount_of_money {
          .amount_of_money_title {
            font-size: 0.32rem;
            font-weight: 500;
            margin-bottom: 0.2rem;
            color: #333;
          }

          .field_price {
            height: 1rem;
            background: #f7f9fc;
            border: 1px solid #e5e5e5;
            border-radius: 0.2rem;
            display: flex;
            align-items: center;

            &.placeStyle .van-field__body input {
              font-size: 0.32rem;
              font-weight: 400;
            }

            .icon_close {
              width: 0.28rem;
              height: 0.28rem;
              background: url("../static/fuel/close.png") no-repeat 0 0;
              background-size: 100% 100%;
            }

            .van-field__body {
              input {
                font-size: 0.4rem;
                font-weight: 600;
              }
            }

            .discountAmt {
              font-size: 0.28rem;
              color: #32af51;
            }

            .van-field__label {
              color: #333;
              font-size: 0.32rem;
              font-weight: 500;
              width: auto;
              margin-right: 0.32rem;
            }
          }
        }
      }

      .oilGun_main_wraper {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 0.24rem;

        .oilGun_main_title {
          height: 1.1rem;
          line-height: 1.1rem;
          font-size: 0.28rem;
          font-weight: 600;
        }

        .oilGun_main_content {
          display: flex;
          flex-wrap: wrap;

          .main_card {
            width: 1.64rem;
            height: 1.64rem;
            background-color: #fff;
            margin: 0 0.15rem 0.16rem 0;
            border-radius: 0.16rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            &.active {
              background-color: #34b053;
              opacity: 0.8;

              .gunName {
                color: #fff;
              }

              .oilName {
                color: #fff;
              }
            }

            &:nth-child(4n) {
              margin: 0 0 0.08rem 0;
            }

            .gunName {
              font-size: 0.36rem;
              font-weight: 600;
              color: #333;
              margin-bottom: 0.1rem;
            }

            .oilName {
              font-size: 0.24rem;
              color: #32af51;
            }
          }
        }
      }

      .remit_page_container {
        background-color: #fff;
        padding: 0.3rem;
        margin-top: 0.4rem;
        border-radius: 0.3rem;

        .remit_page_wraper {
          // padding: 0.32rem 0.28rem 0.4rem;
          // background-color: #f6f6f6;
          // border-radius: 0.2rem;

          .stored_radio {
            height: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .stored_card {
              display: flex;
              align-items: center;
              font-size: 0.32rem;
              font-weight: 600;
              color: #333;
              margin-left: 0.16rem;

              .icon {
                width: 0.6rem;
                height: 0.6rem;
                margin-right: 0.16rem;
                border: 1px dashed #ddd;

                &.stored {
                  // background: url("../../../static/vip/a1.svg") no-repeat 0 0;
                  background: url("../static/fuel/pay-cxk.png") no-repeat 0 0;
                  // background: url("../static/fuel/pay-cxk.png") no-repeat 0 0;
                  background-size: 100% 100%;
                }

                &.vx {
                  // background: url("../../../static/fuel/vx_remit.png") no-repeat
                  background: url("../static/fuel/pay-wx.png") no-repeat 0 0;
                  // background: url("../static/fuel/pay-wx.png") no-repeat 0
                  // 0;
                  background-size: 100% 100%;
                }
              }
            }
          }

          .stored_amt {
            font-size: 0.24rem;
            color: #9095ad;
            padding: 0.1rem 0rem;
          }

          .divider_line {
            width: 100%;
            height: 1px;
            margin: 0.16rem 0;
            background-color: #eee;
          }
        }
      }

      .coupon_info {
        height: 1.3rem;
        margin-top: 0.3rem;
        background: #fff;
        display: flex;
        align-items: center;
        padding: 0rem 0.3rem 0rem 0.46rem;
        border-radius: 0.3rem;

        .van-cell {
          background-color: transparent;
          flex: 1;
          padding: 10px 0px;
          font-size: 0.32rem;
          font-weight: 600;
        }

        img {
          width: 0.6rem;
          height: 0.6rem;
          margin-right: 0.16rem;
          border: 1px dashed #ddd;
        }
      }
    }
  }

  .popup_container {
    .title {
      width: 100%;
      text-align: center;
      height: 1.5rem;
      line-height: 1.5rem;
      font-size: 0.36rem;
      font-weight: 600;
    }

    .popup_main {
      .popup_name {
        box-sizing: border-box;
        padding: 0 0.2rem;
        width: 100%;
        background-color: #f5f6f7;
        height: 0.8rem;
        line-height: 0.8rem;
      }

      .popup_price {
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 0.8rem;
        padding: 0 0.2rem;

        .tag {
          color: #666;
        }

        .price {
          color: #666;
        }
      }

      .popup_preferential {
      }
    }
  }

  .coupons_popup_container {
    .title {
      width: 100%;
      text-align: center;
      height: 1.1rem;
      line-height: 1.1rem;
      font-size: 0.36rem;
      font-weight: 600;
    }

    .van_popup_main {
      .popup_list {
        box-sizing: border-box;
        padding: 0.3rem;
        margin: 0.3rem;
        background-color: #f5f6f7;
        border-radius: 0.16rem;
        display: flex;

        .left_popup {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 2.2rem;
          height: 1.7rem;
          background: url("../static/coupon/quan1.2x.png") no-repeat 0 0;
          background-size: 100% 100%;
          color: #fff;
          margin-right: 8px;

          .valueDesc {
            font-size: 0.4rem;
            margin-bottom: 0.32rem;
          }

          .condition {
            font-size: 0.28rem;
          }

          &.red {
            background: url("../static/coupon/quan2.2x.png") no-repeat 0 0;
            background-size: 100% 100%;
          }
        }

        .right_popup {
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .name {
            width: 1.5rem;
            text-align: center;
            height: 0.6rem;
            line-height: 0.6rem;
            background-color: #fad25e;
            border-radius: 0.6rem;

            &.red {
              background-color: #ed9381;
            }
          }

          .title {
          }
        }

        .radio {
          position: absolute;
          right: 0.32rem;

          input {
            zoom: 1.5;
          }
        }
      }
    }
  }
}

.bottom_fix_bar {
  z-index: 2001;
  width: 100%;
  position: fixed;
  background-color: #fff;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  padding: 0.2rem 0.2rem;

  .fix_bar_main {
    width: 90vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;

    .car_container {
      padding-left: 0.5rem;
      display: flex;
      align-items: center;
      flex: 1;
      // border-top: 1px solid #eee;

      .icon_car {
        width: 0.6rem;
        height: 0.4rem;
        margin-right: 0.3rem;
        margin-left: 0.36rem;

        .van-info {
          background-color: #32af51;
        }
      }

      .newPrice {
        .price_bar {
          font-size: 0.28rem;
          color: #fc474b;

          .price_value {
            font-size: 0.32rem;
            font-weight: 600;
          }
        }

        .price_coupon {
          font-size: 0.2rem !important;
          color: #999;
          // font-weight: 500;

          .coupon_value {
            color: #32af51;
          }
        }
      }
    }

    .van-button--warning {
      background-color: #fd6b00;
      height: 0.9rem;
    }

    .van-button--normal {
      padding: 0 23px;
    }
  }
}

.oil-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 80%;
  width: 300px;
  justify-content: space-between;
  align-content: baseline;
  overflow-y: scroll;
  .oil-items {
    width: 2.2rem;
    height: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f2f2;
    margin-top: 0.2rem;
    border-radius: 5px;
    span {
      font-size: 16px;
    }
  }
  .oil-items:last-child {
    margin-bottom: 50px;
  }
}
.oil-box::-webkit-scrollbar {
  display: none;
}

.oil-title {
  width: 300px;
  text-align: center;
  border-bottom: 1px solid #333;
  padding: 10px 0;
  span {
    font-size: 22px;
    font-weight: 400;
    display: inline-block;
  }
}
</style>
